<!DOCTYPE html>
<html lang="en" id="test">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 5000px;
        }

        div {
            height: 450px;
            border: 1px solid #000;
            text-align: center;
            line-height: 450px;
        }
    </style>
</head>

<body>
    <button id="openBtn">
        点击打开
    </button>
    <button id="closeBtn">
        点击关闭自己
    </button>
    <button id="closeSub">
        点击关闭子窗口
    </button>
    <button id="moveByBtn">
        moveBy
    </button>
    <button id="moveToBtn">
        moveTo
    </button>
    <button id="resizeByBtn">
        resizeBy
    </button>
    <button id="resizeToBtn">
        resizeTo
    </button>
    <button id="resizeByBtn">
        resizeBy
    </button>
    <button id="resizeToBtn">
        resizeTo
    </button>
    <button id="scrollByBtn">
        scrollBy
    </button>
    <button id="scrollToBtn">
        scrollTo
    </button>
    <div>01</div>
    <div>02</div>
    <div>03</div>
    <div>04</div>
    <div>05</div>
    <div>06</div>
    <div>07</div>
    <div>08</div>
    <div>09</div>
    <div>10</div>

</body>
<script>
    var openBtn = document.getElementById("openBtn");
    var closeBtn = document.getElementById("closeBtn");
    var closeSub = document.getElementById("closeSub");
    var moveByBtn = document.getElementById("moveByBtn");
    var moveToBtn = document.getElementById("moveToBtn");
    var subWindow = null;
    // 127.0.0.1或  localhost  本地主机
    // open(url,name,"窗口特征")  打开一个新的浏览器窗口  给窗口设置名称(设置名称后，同名窗口不能重复打开)

    openBtn.onclick = function () {
        // subWindow = window.open("https://jd.com", "baidu", "width=300px,height=300px,left=100px,top=200px,location=no");
        // console.log(subWindow);
        subWindow = window.open("10 Bom介绍.html", "baidu", "width=300px,height=300px,left=100px,top=200px,location=no");
        // 
        // closeSub.onclick = function () {
        //     subWindow.close();   //自己关闭
        // }
        moveByBtn.onclick = function () {
            subWindow.moveBy(50, 50);
        }
        moveToBtn.onclick = function () {
            subWindow.moveTo(800, 300);
        }
        resizeByBtn.onclick = function () {
            subWindow.resizeBy(50, 50);
        }
        resizeToBtn.onclick = function () {
            subWindow.resizeTo(800, 300);
        }

        // setInterval(function () {
        //     subWindow.moveBy(10, 10);
        // }, 100)
    }
    closeBtn.onclick = function () {
        window.close();   //自己关闭
    }

    closeSub.onclick = function () {
        if (subWindow) {
            subWindow.close();   //自己关闭
        }
    }
    scrollByBtn.onclick = function () {
        var num = 0;
        var timer = setInterval(function () {
            num += 50;
            window.scrollBy(50, 50);
            if (num >= 4000) {
                clearInterval(timer);
            }
        }, 100)
    }
    scrollToBtn.onclick = function () {
        // console.log(1111);
        window.scrollTo(800, 1000);
    }

    //   document.documentElement.scrollTop     
</script>

</html>